<template >
    <div class="news">
        <div class="topImg">
            <img :src="result.basc.ad.photo" />
            <div class="swiperbg"></div>
        </div>
        <div class="sectionNews" style="padding:20px 0; ">
            <div class="sectionTitle">
                <div class="name">{{result.basc.nav&&result.basc.nav[1].name}}</div>
                <p class="sname">{{result.basc.nav&&result.basc.nav[1].en_name}}</p>
                <p class="dian"><span></span></p>
            </div>
            <div class="indexNewsList">
                <news-list :lists="result.list"></news-list>
            </div>
            <div class="loadMore" v-if="isShow">
                <x-button :disabled="disabled" :show-loading="loading" @click.native="loadMore">{{btnText}}</x-button>
            </div>
        </div>
        <footers :basc="result.basc"></footers>
    </div>
</template>

<script>
import {XButton} from 'vux'
import newsList from './NewsList'
import Footers from './Footer'
export default {
    components:{
        newsList,Footers,XButton
    },
    data:()=>({
        result:{basc:{web_logo:'',ad:{photo:''}}},
        page:1,
        isShow:true,
        btnText:'查看更多',
        disabled:false,
        loading:false
    }),
    created(){
        this.Query('news', {p:this.page}).then(result=>{
            this.page += 1;
            this.result = result
        }).catch(os =>{
            console.log('错误');
        });
    },
    methods:{
        loadMore(){
            this.btnText = '加载中...';
            this.disabled = true;
            this.loading = true;
            this.Query('news', {p:this.page}).then(result => {
                if( result.list.length < 1 ){
                    this.btnText = "没有了";
                    setTimeout(()=>{
                        this.isShow = false;
                    }, 1000);
                }else{
                    this.page += 1;
                    let d = this.result.list.slice();
                    this.result.list = (this.result.list.slice()).concat(result.list);
                    this.disabled = false;
                    this.loading = false;
                    this.btnText = "继续查看";
                }
            }).catch(os =>{
                console.log('错误');
            });
        }
    }
}
</script>

<style lang="less">
.loadMore{
    width: 132px;
    height: 30px;
    line-height: 30px;
    margin:20px auto;
    .weui-btn_default{
        font-size: 14px;
        color: #999;
    }
}
</style>
